<template>
	<view class="c-container" style="border-bottom: 1px solid #dedede;">
		<view class="tab-control">
			<view class="tab-control-item" v-if="income.length > 0" :class="{active: currentIndex == 0}" @click="tabClick('banquet')">
				<text>收款</text>
			</view>
			<view class="tab-control-item" v-if="payment.length > 0" :class="{active: currentIndex == 1}" @click="tabClick('table')">
				<text>付款</text>
			</view>
		</view>
		<swiper :style="`height:${swiperHeight}px;`" @change="swiperChange" :current="swiperCurrent">
			<swiper-item @touchmove.stop>
				<view class="swiper-item">
					<income :parent="_self" :income="income" :order_id="order_id" class="income" />
				</view>
			</swiper-item>
			<swiper-item @touchmove.stop>
				<view class="swiper-item">
					<payment :parent="_self" :payment="payment" :order_id="order_id" class="payment" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	
	import {updateSwiperHeight} from '@/utils/funs.js'
	
	// 子组件
	import income from './income/detail/income.vue'
	import payment from './payment/detail/payment.vue'
	
	export default {
		props:{
			order_id: {
				type: String,
				default(){
					return ''
				}
			},
			income: {
				type: Array,
				default(){
					return []
				}
			},
			payment: {
				type: Array,
				default(){
					return []
				}
			}
		},
		components:{
			income,
			payment
		},
		data() {
			return {
				currentIndex: 0,
				swiperCurrent: 0,
				swiperHeight: 240, // 滑动区域高度
				swiperItemHeights: []
			}
		},
		beforeMount() {
			this.updateSwiperHeight = updateSwiperHeight;
		},
		methods: {
			tabClick(type) {
				switch (type) {
					case 'banquet':
						this.currentIndex = 0;
						this.swiperCurrent = 0;
						break;

					case 'table':
						this.currentIndex = 1
						this.swiperCurrent = 1;
						break;

					case 'vegetable':
						this.currentIndex = 2
						this.swiperCurrent = 2;
						break;

					case 'suborder':
						this.currentIndex = 3
						this.swiperCurrent = 3;
						break;
				}
			},
			swiperChange(e) {
				let index = e.detail.current
				this.currentIndex = index
			},
		}
	}
</script>

<style lang="less">
	.tab-control {
		display: flex;
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		background-color: #fff;

		.tab-control-item {
			flex: 0 25%;
		}

		.tab-control-item text {
			padding: 5px;
		}

		.active {
			color: #007AFF;
		}

		.active text {
			border-bottom: 3px solid #007AFF;
		}

	}
</style>
